<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/buttons.css">
    <link rel="stylesheet" type="text/css" href="/static/css/content/cikonss.css">
    <link rel="stylesheet" type="text/css" href="/static/css/content/lyrics.css">
    <link rel="stylesheet" type="text/css" href="/static/css/content/classification.css">
    <link rel="stylesheet" type="text/css" href="/static/css/material-icons.css">
    <title>播放</title>
    <style>
        #logo > img{
            width: 50%;
            height: 80%;
        }

        #navbarSupportedContent  > #title-hover > li > a {
            text-decoration: none;
            transition: all 0.5s;
        }
        #navbarSupportedContent > #title-hover > li > a:hover{
            padding-left: 20px;
        }
        #navbarSupportedContent  span{
            font-size: 25px;
            padding-left: 20px;
        }
        .disk{
            width: 0;
            height: 0;
            padding: 120px;
            border-radius: 50%;
        }
        @keyframes diskRotate {
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light border-danger" id="nav-title">
    <div id="logo" class="col-md-2" style="text-align:center;">
        <img src="/static/img/logo.png">
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul id="title-hover" class="navbar-nav mr-auto">
            <li class="nav-item active">
                <span class="nav-link">大象云音乐</span>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/"> <span>首页</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/user/profile"> <span>我的音乐</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>推荐歌单</span></a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="/search">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" name="key" aria-label="Search">
        </form>
        <ul class="navbar-nav" id="log-btns">
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-primary" data-toggle="modal" data-target="#loginModel">登录</a>
            </li>
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-link" href="/sign/page">注册</a>
            </li>
            <li class="nav-item" th:if="${session.user != null}">
                <a class="btn btn-link" href="/logout">注销</a>
            </li>
            <li class="nav-item" th:if="${session.user != null && session.user.permission.equals('admin')}">
                <a class="btn btn-link" href="/admin/page">后台</a>
            </li>
        </ul>
    </div>
</nav>
<!-- Modal 登录 -->
<div class="modal fade" id="loginModel" tabindex="-1" role="dialog" aria-labelledby="loginModelTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLongTitle">登录账号</h5>
                <span v-bind:class="{'badge badge-pill badge-danger':isFailed}"
                      v-bind:hidden="hiddenSpan">{{warning}}</span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="loginForm">
                    <div class="form-group">
                        <label for="num">号码</label>
                        <input type="text" class="form-control" name="number" id="num" v-model="num"
                               placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" class="form-control" name="password" id="pwd" v-model="pwd"
                               placeholder="请输入密码">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="login">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="container">
    <div class="row" id="mainPlayer">
        <div class="col-md-3">
            <div class="disk" v-bind:style="{backgroundImage: 'url(' + songImg + ')',animation:'diskRotate 30s infinite linear'}" v-if="isPlaying"></div>
            <div class="disk" v-bind:style="{backgroundImage: 'url(' + songImg + ')'}" v-if="!isPlaying"></div>

            <div id="likeBtns" style="margin-left: 30%;margin-top: 10%">
                <button id="1" type="button" v-if="!isLike" class="btn btn-default btn-sm">
                    <i class="material-icons" style="font-size: 10px;"  @click="like">favorite_border 我喜欢</i>
                </button>
                <button id="2" type="button" v-if="isLike" class="btn btn-default btn-sm">
                    <i class="material-icons text-danger" style="font-size: 10px;" @click="dislike">favorite 我喜欢</i>
                </button>
                <button type="button" class="btn btn-default btn-sm">
                    <i class="material-icons" style="font-size: 10px;">file_download 下载</i>
                </button>
            </div>
            <ul id="playList" class="list-group">
                <li class="list-group-item"
                    v-for="(song,index) in playList"
                    v-if="(index+4) <= listPosition || index < (listPosition+4)">
                    {{song.name+'-'+song.singer}}
                </li>
            </ul>
        </div>
        <div class="col-1"></div>
        <div class="col-md-8" v-if="currentSong!=null">
            <h2>
                {{currentSong.name}}
                <h5 style="margin-left: 10px"><small><a :href="'/search/page?key='+currentSong.singer">{{currentSong.singer}}</a></small></h5>
            </h2>
            <div id="playTop">
                <ul class="lyricBox">
                    <li class="" v-for="lyc in preLyric">{{lyc.lyc}}</li>
                    <li class="active">{{nowLyric.lyc}}</li>
                    <li class="" v-for="lyc in sufLyric">{{lyc.lyc}}</li>
                </ul>
            </div>
            <div id="playBottom">
                <div class="row">
                    <div class="col-md-2">
                        <i class="material-icons" @click="changeSong('<')">skip_previous</i>
                        <i class="material-icons" v-if="!isPlaying" @click="pause">play_arrow</i>
                        <i class="material-icons" v-if="isPlaying" @click="pause">pause</i>
                        <i class="material-icons" @click="changeSong('>')">skip_next</i>
                    </div>
                    <div class="col-md-6">
                        <div class="progress" @click="jump">
                            <div class="progress-bar"
                                 role="progressbar"
                                 :style="'width: '+progressPercent+'%;'"
                                 aria-valuenow="25"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <i class="material-icons" v-if="!isRepeat" @click="repeatChange">repeat</i>
                        <i class="material-icons" v-if="isRepeat" @click="repeatChange">repeat_one</i>
                        <i class="material-icons" v-if="mainAudio.volume > 0" @click="changeVol('down')">volume_down</i>
                        <i class="material-icons" v-if="mainAudio.volume==0">volume_off</i>
                        <i class="material-icons" @click="changeVol('up')">volume_up</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-md-8">
            <h3 style="margin-left: 18%;padding-top: 20px">听友评论</h3>
            <div id="commentObject">
                <div class="form-group">
                    <!--<label for="name">文本框</label>-->
                    <textarea class="form-control" v-model="postContent" rows="3" placeholder="将你的评论写在这里哦^^"></textarea>
                    <br>
                    <button type="submit" @click="publishComment" class="btn btn-primary btn-block">发布</button>
                </div>
                <h3 style="margin-left: 18%;padding-top: 20px">精彩评论</h3>
                <ul class="list-group-flush">
                    <li class="list-group-item" v-for="comment in comments">
                        <h3 class="userName">{{comment.user}}</h3>
                        <p>{{comment.content}}</p>
                        <small class="text-info" style="margin-bottom: 5px;margin-left: 80%">{{comment.publish}}</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<script src="/static/js/content/play.js"></script>
</body>
</html>